<template>
    <span class="imgLoad" style="display:inline-block;" v-if="defaultImage">
        <img v-if='!finishLoadFlag' 
               mode="aspectFill" 
              :src='defaultImage'
              lazy-load="true"
              :style="{width:width?width:'',height:height?height:''}"
              />
        <img  mode="aspectFill" 
                :class='finishLoadFlag ? "" : "before-load"' 
                :src='originalImage' 
                @load='finishLoad'
                lazy-load="true"
                :style="{width:width?(finishLoadFlag && width):'',height:(finishLoadFlag && height)?height:''}"
                />
    </span>



</template>
<script>
export default {
    props:{
        defaultImage: String,
        //原始图片
        originalImage: String,
        height: {
            type: String,
        },
        width:{
            type: String,
        }
    },
    data() {
        return{
            finishLoadFlag: false
        }
    },
    methods:{
       finishLoad: function (e) {
            this.finishLoadFlag=true
        }
    },
    onLoad(options){

    }
}
</script>

<style lang="scss">
.imgLoad{
    
}
.before-load {
  width: 0;
  height: 0;
  opacity: 0;
}
</style>